<template>
	<view class="_hot_teahcer">
		<view class="u-flex  u-flex-between u-flex-items-center">
			<image class="_avatar" :src="info.callingBg || info.avatar" mode="aspectFit"></image>
			<view>
				<u-button shape="circle" text="预约" size="mini"
					color="linear-gradient(-41.87deg, rgb(254, 45, 75),rgb(254, 72, 107) 50%,rgb(254, 131, 175) 100%)"
					:customStyle="{
						width: '88rpx',
						height: '44rpx',
						borderRadius: '48rpx'
					}" @click="toInfo"></u-button>
			</view>
		</view>
		<view class="u-m-t-16 u-m-l-8">
			<view class="u-flex u-flex-items-center">
				<view class="f-s-18 f-w-b">{{ info.name }}</view>
				<block v-if="info.major">
					<tag :left="12" :right="0" background="#F1F0F5" borderColor="#F1F0F5" color="#696975" :text="info.major"></tag>
				</block>
				<block v-else="info.domainList.length > 0">
				<tag :left="12" :right="0" background="#F1F0F5" borderColor="#F1F0F5" color="#696975" :text="info.domainList[0].name"></tag>
				</block>
			</view>
			<view class="u-m-t-16 f-s-12 u-info u-line-1">{{ info.label }}</view>
		</view>
	</view>
</template>

<script setup>
	import Tag from '@/components/common/tag.vue';
	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		info: Object
	})

	const toInfo = () => {
		uni.navigateTo({
			url: '/subPackages/teacher/index?userId=' + props.info.userId
		})
	}
</script>

<style lang="scss" scoped>
	._hot_teahcer {
		padding: 32rpx;
		border-radius: 16rpx;
		background: linear-gradient(180.00deg, rgb(238, 240, 255), rgb(255, 255, 255) 100%);

		._avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid #F1F0F5;
		}



	}
</style>